import React from 'react';
import {
    Button,
    Text,
    View,
    Image,
    StyleSheet,
    Dimensions,
    StatusBar,
    ActivityIndicator,
    FlatList,
    ScrollView,
    RefreshControl,
    Animated,
    TouchableHighlight,
    SectionList,
    TouchableOpacity,
    Modal, DeviceEventEmitter
} from 'react-native';
import Swiper from 'react-native-swiper';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import AsyncStorage from '@react-native-community/async-storage';
const { width, height } = Dimensions.get('window');
import Styles from './Styles/FootballGameStyles';

import Ugame from '../../../../Ugame';
import Httpc from "../../../utils/Httpc";
import REQUEST from "../../../../REQUEST";
import Football from "../../../utils/Football";
import Utils from "../../../utils/Utils";

import RootSiblings from 'react-native-root-siblings';

var id = 0;
var elements = [];
var weekday = new Array(7);
weekday[0] = "星期天";
weekday[1] = "星期一";
weekday[2] = "星期二";
weekday[3] = "星期三";
weekday[4] = "星期四";
weekday[5] = "星期五";
weekday[6] = "星期六";

export default class FootballGame extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            refreshing: false,
            modalVisible: false,
            moreModalVisible: false,
            toastModelVisible: false,
            betBFlVisible: false,
            message: 'message',
            serverData: null,
            CDownTime: 0,
            Content: '',
            single_type: [
                ["混合投注", "胜平负", "半全场", "比分", "进球数"],//过关
                ["胜平负", "半全场", "比分", "进球数"]//单关
            ],
            curr_single_type: { id: 0, data: '混合投注' },
            ball_addr: [],
            curr_ball_addr: [],
            select_boll_addr: [],
            dataSource: [],
            betNumber: {},//投注  {"NoID": 0, // 自定义id "Number": 0,//投注的期数   "TypeId": 0,//1代表  胜平负 2代表让分胜平负  3代表比分  等等 "BetNo": 0 //投注的位置}
            modelSelectItem: {},
            bet_count: 0,//投注场次
            moreData: [],
            spf_title: ['胜', '平', '负'],
            rspf_title: ['让胜', '让平', '让负'],
            crs_title: ["1:0", "2:0", "2:1", "3:0", "3:1", "3:2", "4:0", "4:1", "4:2", "5:0", "5:1", "5:2", "胜其他", "0:0", "1:1", "2:2", "3:3", "平其他", "0:1", "0:2", "0:3", "0:4", "0:5", "1:2", "1:3", "1:4", "1:5", "2:3", "2:4", "2:5", "负其他"],
            ttg_title: ['0', '1', '2', '3', '4', '5', '6', '7+'],
            hafu_title: ['胜-胜', '胜-平', '胜-负', '平-胜', '平-平', '平-负', '负-胜', '负-平', '负-负'],
            BFtab: '主胜',
            BFItem: null,
            BFSelectItem: {},
            barBackgroundColor:'transparent',
            barBackgroundColorHide:'rgba(0,0,0,0.2)',

        };
        this.getServerData = this.getServerData.bind(this);
        this._time = null;
    }
    static navigationOptions = ({ navigation }) => {
        const { params } = navigation.state;
        let curr_single_type_id = navigation.getParam('curr_single_type_id');
        let curr_single_type_data = navigation.getParam('curr_single_type_data');
        let str = curr_single_type_id == 0 ? '过关' : '单关';
        let title = curr_single_type_data + "(" + str + ")";
        return {
            headerTitle: () => (
                <View style={Styles.header}>
                    <View></View>
                    <TouchableOpacity onPress={navigation.getParam('show_single_type')}>
                        <View style={Styles.header_title}>
                            <Text style={{ color: '#ffffff' }}>{title}</Text>
                            <Image resizeMode="cover" style={{ width: 12, height: 14 }} source={require('../../../image/js_img_nav_arrows.png')} />
                        </View>
                    </TouchableOpacity>
                    <View style={Styles.header_right}>
                        <TouchableOpacity onPress={navigation.getParam('show_ball_addr')}>
                            <Text style={{ color: '#ffffff', marginRight: 5 }}>筛选</Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={navigation.getParam('show_right_menu')}>
                            <View style={{ width: 22, height: 17 }}>
                                <Image resizeMode="cover" style={{ width: 22, height: 17 }} source={require('../../../image/js_img_nav_menu.png')} />
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
            ),
            headerStyle: {
                backgroundColor: '#d0162e',
                paddingTop: 18,
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                //fontWeight: 'bold',
            },
        };
    };
    componentWillMount() {
        //组件将要被加载到视图之前调用


    }
    componentDidMount() {
        // 在调用了render方法，组件加载成功并被成功渲染出来之后，所要执行的后续操作，一般都会在这个函数中进行，比如经常要面对的网络请求等加载数据操作
        // *** 因为UI已经成功渲染，而且这里面是异步的，所以放在这个函数进行数据的请求等复杂的操作，不会出现UI错误**
        let curr_single_type = this.state.curr_single_type;
        this.props.navigation.setParams({ curr_single_type_id: curr_single_type.id });
        this.props.navigation.setParams({ curr_single_type_data: curr_single_type.data });
        this.props.navigation.setParams({ show_single_type: this.show_single_type });
        this.props.navigation.setParams({ show_ball_addr: this.show_ball_addr });
        this.props.navigation.setParams({ show_right_menu: this.show_right_menu });
        this.listener = DeviceEventEmitter.addListener('updateclearbet', (value) => {
            //这里面是要调用的方法，比如：刷新
            //value:是下面页面在 通知 时 ，所传递过来的参数
            this.setState({
                betNumber: {},
                bet_count: 0,
            })
        });
        const { navigation } = this.props;
        this.setState({
            CDownTime: navigation.getParam("CDownTime"),
            Content: navigation.getParam("Content")
        }, () => {
            this.getServerData(() => {

            });
        });

    }
    componentWillUnmount() {
        if (!!this.listener) this.listener.remove();
        if (elements.length > 0) {
            this.destroySibling();
        }

        // try{           
        //     this.setState({
        //         modalVisible: false,
        //         moreModalVisible: false,
        //         betBFlVisible: false,
        //         modelSelectItem:{}
        //     })
        // }catch (e) {

        // }
    }
    getServerData = (func) => {
        Httpc.get(REQUEST.FootballGetGameList, {}, (res) => {
            let result = res.Data;
            this.setState({
                serverData: res.Data
            }, () => {
                this._create_dataSource(func);
            })
        })
    }
    _create_dataSource = (func) => {
        let { serverData, curr_single_type, ball_addr, curr_ball_addr } = this.state;
        let result = [];
        let new_ball_addr = [];
        if (ball_addr.length == 0) {
            for (let i = 0; i < serverData.length; i++) {
                new_ball_addr.push(serverData[i].l_cn_abbr);
            }
            this.setState({
                ball_addr: Array.from(new Set(new_ball_addr)),
                curr_ball_addr: Array.from(new Set(new_ball_addr)).concat(),
                select_boll_addr: Array.from(new Set(new_ball_addr)).concat(),
            });
        }

        if (curr_ball_addr.length > 0) {
            for (let i = 0; i < serverData.length; i++) {
                if (curr_ball_addr.indexOf(serverData[i].l_cn_abbr) > -1) {
                    result.push(serverData[i]);
                }
            }
        } else {
            result = serverData;
        }
        let newresult = [];
        let CDownTime = this.state.CDownTime;
        for (let i = 0; i < result.length; i++) {
            let time = result[i].date_cn.substring(0, 10) + ' ' + result[i].time_cn;
            time = time.replace(/-/g, '/') // 把所有-转化成/
            let timestamp = new Date(time).getTime();
            let end_time = Utils.timestampToTime(timestamp - CDownTime * 1000);
            result[i].end_time = end_time;
            if (curr_single_type.id == 1) {
                switch (curr_single_type.data) {
                    case '胜平负':
                        if (result[i].had_single == 0 && result[i].hhad_single == 0) {
                            continue;
                        }
                        break;
                    case '半全场':
                        if (result[i].hafu_single == 0) {
                            continue;
                        }
                        break;
                    case '比分':
                        if (result[i].hafu_single == 0) {
                            continue;
                        }
                        break;
                    case '进球数':
                        if (result[i].hafu_single == 0) {
                            continue;
                        }
                        break;
                }
            }
            let date = result[i].date_cn.substring(0, 10);
            let week = weekday[new Date(result[i].date_cn).getDay()];
            let is_exist = false;
            let index = 0;
            for (let j = 0; j < newresult.length; j++) {
                if (newresult[j].date == date) {
                    is_exist = true;
                    index = j;
                    break;
                }
            }
            let key = newresult.length;
            let temp = {};
            let temp_data = {
                number: result[i].number,
                sort_num: result[i].sort_num,
                l_cn_abbr: result[i].l_cn_abbr,
                h_cn_abbr: result[i].h_cn_abbr,
                a_cn_abbr: result[i].a_cn_abbr,
                had_single: result[i].had_single,
                hhad_single: result[i].hhad_single,
                crs_single: result[i].crs_single,
                ttg_single: result[i].ttg_single,
                hafu_single: result[i].hafu_single,
                goaline: result[i].goaline,
                date_cn: result[i].date_cn,
                time_cn: result[i].time_cn,
                time_cn_str: result[i].time_cn.substring(0, 5),
                a: result[i].a,
                d: result[i].d,
                h: result[i].h,
                ha: result[i].ha,
                hd: result[i].hd,
                hh: result[i].hh,
                crs: result[i].crs,
                ttg: result[i].ttg,
                hafu: result[i].hafu,
                end_time: end_time,
                xi_show: 'off',
            };
            if (is_exist == false) {
                temp.key = key;
                temp.date = date;
                temp.week = week;
                temp.isShow = 'on';
                temp.count = 0;
                temp.data = [];
                temp_data.pid = temp.key;
                temp_data.key = 0;
                temp.data.push(temp_data)
                newresult.push(temp);
            } else {
                temp_data.pid = newresult[index].key;
                temp_data.key = newresult[index].data.length;
                newresult[index].data.push(temp_data);
            }
        }
        Football.setGameListsData(result);
        for (let i = 0; i < newresult.length; i++) {
            newresult[i].count = newresult[i].data.length;
        }
        Ugame.constDataSource = Utils.deepCopy(newresult);
        this.setState({
            betNumber: {},
            modelSelectItem: {},
            bet_count: 0,//投注场次
            dataSource: Utils.deepCopy(newresult),
        })
        func();
    }
    change_single_type = (index, data) => {
        this.props.navigation.setParams({ curr_single_type_id: index });
        this.props.navigation.setParams({ curr_single_type_data: data });
        this.destroySibling();
        this.setState({
            curr_single_type: {
                id: index,
                data: data
            }
        }, () => {
            //过滤数据
            this._create_dataSource(() => {

            })
            //end
        });
    }
    renderSingleType(index, curr_single_type) {
        let single_type = this.state.single_type[index];
        var itemArr = [];
        for (var i = 0; i < single_type.length; i++) {
            let data = single_type[i];
            itemArr.push(
                <TouchableOpacity key={i} onPress={() => this.change_single_type(index, data)}>
                    <View >
                        <Text style={curr_single_type.id == index && data == curr_single_type.data ? Styles.cate_item_on : Styles.cate_item}>{data}</Text>
                    </View>
                </TouchableOpacity>
            );
        }
        return itemArr;
    }
    change_ball_addr = (data) => {
        let select_boll_addr = this.state.select_boll_addr;
        let index = select_boll_addr.indexOf(data);
        index == -1 ? select_boll_addr.push(data) : select_boll_addr.splice(index, 1);
        this.setState({
            select_boll_addr: select_boll_addr
        })
    }
    _show_single_type_model = () => {
        let { single_type, curr_single_type } = this.state;
        return (
            <TouchableOpacity style={Styles.sibling} onPress={this.destroySibling}>
                <View style={Styles.cate_menu}>
                    <View >
                        <Text>过关</Text>
                    </View>
                    <View style={Styles.cate_list}>
                        {this.renderSingleType(0, curr_single_type)}
                    </View>
                    <View >
                        <Text>单关</Text>
                    </View>
                    <View style={Styles.cate_list}>
                        {this.renderSingleType(1, curr_single_type)}
                    </View>
                </View>
            </TouchableOpacity >
        );
    }
    _render_ball_addr_item = (item, index, separators) => {
        let { select_boll_addr } = this.state;
        return (
            <TouchableOpacity onPress={() => this.change_ball_addr(item)}>
                <View style={select_boll_addr.indexOf(item) == -1 ? Styles.list_item : Styles.list_item_on} >
                    <Text style={{ textAlign: 'center' }}>{item}</Text>
                    {select_boll_addr.indexOf(item) == -1 ? null : <Image resizeMode="cover" style={Styles.bj} source={require('../../../image/js_img_liansai_checked.png')} />}
                </View>
            </TouchableOpacity>
        );
    }
    //全选
    _on_all_selected = () => {
        this.setState({
            curr_ball_addr: this.state.ball_addr.concat(),
            select_boll_addr: this.state.ball_addr.concat(),
        })
    }
    _getBetCount = (betNumber) => {
        let array = [];
        for (let key in betNumber) {
            if (array.indexOf(betNumber[key].Number) == -1) {
                array.push(betNumber[key].Number);
            }
        }
        return array.length;
    }
    //反选
    _on_reverse_selected = () => {
        let { ball_addr, select_boll_addr } = this.state;
        let temp = [];
        for (var i = 0; i < ball_addr.length; i++) {
            if (select_boll_addr.indexOf(ball_addr[i]) != -1) {
                continue;
            }
            temp.push(ball_addr[i]);
        }
        this.setState({
            select_boll_addr: temp,
        });
    }
    _show_ball_addr_model = () => {
        this.destroySibling();
        let { ball_addr, select_boll_addr } = this.state;
        return (
            <Modal
                animationType="fade"
                transparent={true}
                visible={this.state.modalVisible}
                onRequestClose={() => {
                    this.hide_ball_addr()
                }}
            >
                <View style={Styles.ball_addr}>
                    <View style={Styles.ball_addr_content}>
                        <View style={Styles.ball_addr_content_header} >
                            <TouchableOpacity onPress={this._on_all_selected}>
                                <Text style={ball_addr.toString() == select_boll_addr.toString() ? Styles.btn_status_on : Styles.btn_status}>全选</Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={this._on_reverse_selected}>
                                <Text style={Styles.btn_status}>反选</Text>
                            </TouchableOpacity>
                        </View>
                        <View style={Styles.ball_addr_content_list} >
                            <FlatList
                                numColumns={3}
                                horizontal={false}
                                data={ball_addr}
                                extraData={this.state}
                                renderItem={({ item, index, separators }) => this._render_ball_addr_item(item, index, separators)}
                            />
                        </View>
                        <View style={Styles.ball_addr_content_bottom} >
                            <TouchableOpacity style={Styles.ball_addr_operation} onPress={this.hide_ball_addr}>
                                <View style={[Styles.btn_item, { borderRightColor: '#ededed', borderRightWidth: 0.5, height: 40 }]}>
                                    <Text>取消</Text>
                                </View>
                            </TouchableOpacity >
                            <TouchableOpacity style={Styles.ball_addr_operation} onPress={this.submit_ball_addr}>
                                <View style={[Styles.btn_item]}>
                                    <Text style={{ color: '#d0162e' }}>确定</Text>
                                </View>
                            </TouchableOpacity >
                        </View>
                    </View>
                </View>
            </Modal>
        );
    }
    _on_goIntroduce = () => {
        this.destroySibling();
        this.props.navigation.navigate('Introduce', {
            Content: this.state.Content
        })
    }
    on_go_gameorder = () => {
        if (!Ugame.isLogin()) {
            this.props.navigation.navigate('Login');
        } else {
            this.destroySibling();
            this.props.navigation.navigate('GameOrder');
        }
    }
    _on_FootballLottery=()=>{
        this.props.navigation.navigate('FootballLottery');
    }
    _show_right_menu_model = () => {
        this.destroySibling();
        return (
            <TouchableOpacity style={Styles.sibling} onPress={this.destroySibling}>
                <View style={Styles.right_menu}>
                    <Image resizeMode="cover" style={Styles.right_menu_bg} source={require('../../../image/js_img_menu_jincai_bg.png')} />
                    <View style={{ paddingRight: 5 }}>
                        <TouchableOpacity onPress={() => this._on_goIntroduce()}>
                            <Text style={Styles.right_menu_item}>玩法介绍</Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => this._on_FootballLottery()}>
                        <Text style={Styles.right_menu_item}>历史开奖</Text>
                        </TouchableOpacity>                        
                        <TouchableOpacity onPress={() => this.on_go_gameorder()}>
                            <Text style={Styles.right_menu_item}>投注查询</Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => this.props.navigation.navigate('Live')}>
                            <Text style={Styles.right_menu_item}>即时比分</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </TouchableOpacity>
        );
    }
    show_single_type = () => {
        if (elements.length == 0) {
            let sibling = new RootSiblings(this._show_single_type_model());
            id++;
            elements.push(sibling);
        } else {
            this.destroySibling();
        }
    };
    show_right_menu = () => {
        if (elements.length == 0) {
            let sibling = new RootSiblings(this._show_right_menu_model());
            id++;
            elements.push(sibling);
        } else {
            this.destroySibling();
        }
    }
    destroySibling = () => {
        let lastSibling = elements.pop();
        lastSibling && lastSibling.destroy();
    };
    show_ball_addr = () => {
        this.setState({
            modalVisible: true
        });
    }
    hide_ball_addr = () => {
        let { curr_ball_addr } = this.state;
        this.setState({
            select_boll_addr: curr_ball_addr.concat(),
            modalVisible: false
        });
    }
    submit_ball_addr = () => {
        if (this.state.select_boll_addr.length == 0) {
            alert('至少选择一个');
            return;
        }
        this.setState({
            curr_ball_addr: this.state.select_boll_addr.concat(),
            modalVisible: false
        }, () => {
            //过滤数据
            this._create_dataSource(() => {

            })
            //end
        });
    }
    _render_crs_item = (item, TypeId, BetNo, value) => {
        let crs_title = this.state.crs_title;
        let str = crs_title[BetNo - 1];
        let tips = str;
        let css = [];
        let text_css = {};
        if (this._checkModelBetNumber(item.number, TypeId, BetNo)) {
            css.push(Styles.td2_on);
            text_css = { color: '#ffffff' };
        } else {
            css.push(Styles.td2)
            text_css = { color: '#666666' };
        }
        if (BetNo == 13 || BetNo == 31) {
            css.push({ width: (width - 55) / 5 * 3 });
        }
        let dan = this._get_item_dan(item, TypeId);
        return (
            <TouchableOpacity onPress={() => this._on_mode_add_betNumber(item, TypeId, BetNo, tips, value, dan)}>
                <View style={css}>
                    <Text style={[text_css, { fontSize: 12 }]}>{str}</Text>
                    <Text style={[text_css, { fontSize: 12 }]}>{value==''?'':Number(value).toFixed(2)}</Text>
                </View>
            </TouchableOpacity>

        );
    }
    _render_ttg_item = (item, TypeId, n, m) => {
        let ttg = item.ttg.split(",");
        let ttg_title = this.state.ttg_title;
        let itemArr = [];
        for (let i = n; i <= m; i++) {
            let BetNo = i;
            let str = ttg_title[BetNo - 1];
            let value = ttg[BetNo - 1];
            let tips = str;
            let css = [];
            let text_css = {};
            if (this._checkModelBetNumber(item.number, TypeId, BetNo)) {
                css.push(Styles.td3_on);
                text_css = { color: '#ffffff' };
            } else {
                css.push(Styles.td3)
                text_css = { color: '#666666' };
            }
            let key = item.number + "" + TypeId + "" + BetNo;
            itemArr.push(
                <TouchableOpacity key={key} onPress={() => this._on_mode_add_betNumber(item, TypeId, BetNo, tips, value)}>
                    <View style={css}>
                        <Text style={[text_css, { fontSize: 12 }]}>{str}</Text>
                        <Text style={[text_css, { fontSize: 12 }]}>{value==''?'':Number(value).toFixed(2)}</Text>
                    </View>
                </TouchableOpacity>
            );

        }
        return itemArr;
    }
    _render_hafu_item = (item, TypeId, n, m) => {
        let ttg = item.hafu.split(",");
        let hafu_title = this.state.hafu_title;
        let itemArr = [];
        for (let i = n; i <= m; i++) {
            let BetNo = i;
            let str = hafu_title[BetNo - 1];
            let value = ttg[BetNo - 1];
            let tips = str;
            let css = [];
            let text_css = {};
            if (this._checkModelBetNumber(item.number, TypeId, BetNo)) {
                css.push(Styles.td1_on);
                text_css = { color: '#ffffff' };
            } else {
                css.push(Styles.td1)
                text_css = { color: '#666666' };
            }
            let key = item.number + "" + TypeId + "" + BetNo;

            itemArr.push(
                <TouchableOpacity key={key} onPress={() => this._on_mode_add_betNumber(item, TypeId, BetNo, tips, value)}>
                    <View style={css}>
                        <Text style={[text_css, { fontSize: 12 }]}>{str}</Text>
                        <Text style={[text_css, { fontSize: 12 }]}>{!!value?Number(value).toFixed(2):null}</Text>
                    </View>
                </TouchableOpacity>
            );
        }
        return itemArr;
    }
    _td_item_model = (item, TypeId, BetNo, value) => {
        let { spf_title } = this.state;
        let str = spf_title[BetNo - 1];
        let tips = str;
        let css = [];
        switch (TypeId) {
            case 1:
                css = this._is_checked(1, item.had_single, item.number, TypeId, BetNo);
                break;
            case 2:
                css = this._is_checked(1, item.hhad_single, item.number, TypeId, BetNo);
                break;
        }
        return (
            <TouchableOpacity onPress={() => this._on_mode_add_betNumber(item, TypeId, BetNo, tips, value)}>
                <Text style={css}>{str}{Number(value).toFixed(2)}</Text>
            </TouchableOpacity>
        );
    }
    _render_spf_item = (item, TypeId) => {
        if (TypeId == 1) {
            var css = item.had_single == 1 ? Styles.th1_dan : Styles.th1;
            return (
                <View style={css}>
                    {this._td_item_model(item, 1, 1, item.h)}
                    {this._td_item_model(item, 1, 2, item.d)}
                    {this._td_item_model(item, 1, 3, item.a)}
                    {item.had_single == 1 ? <Image resizeMode="cover" style={Styles.td_dan_icon} source={require('../../../image/js_img_icon_sfdg.png')} /> : null}
                </View>
            );
        }
        if (TypeId == 2) {
            var css = item.hhad_single == 1 ? Styles.th1_dan : Styles.th1;
            return (
                <View style={css}>
                    {this._td_item_model(item, 2, 1, item.hh)}
                    {this._td_item_model(item, 2, 2, item.hd)}
                    {this._td_item_model(item, 2, 3, item.ha)}
                    {item.hhad_single == 1 ? <Image resizeMode="cover" style={Styles.td_dan_icon} source={require('../../../image/js_img_icon_sfdg.png')} /> : null}
                </View>
            );
        }
    }

    _show_more_model = () => {
        let { moreData, crs_title, ttg_title, hafu_title } = this.state;
        if (moreData.length == 0) {
            return (
                <View></View>
            );
        }
        let crs = moreData.crs.split(",");
        let ttg = moreData.ttg.split(",");
        let hafu = moreData.hafu.split(",");
        return (
            <Modal
                animationType="none"
                transparent={true}
                visible={this.state.moreModalVisible}
                onRequestClose={() => {
                    this.hide_more_model()
                }}
            >
                <View style={Styles.more_model}>
                    <View style={Styles.more_model_content}>
                        <View style={Styles.more_model_header}>
                            <Text>{moreData.h_cn_abbr}</Text>
                            <Text>VS</Text>
                            <Text>{moreData.a_cn_abbr}</Text>
                        </View>
                        <ScrollView style={{ width: width - 32, height: height - 200 }}>
                            <View >
                                <Text style={{ textAlign: 'left', height: 30, lineHeight: 30, width: width - 32, color: '#333333' }}>胜平负/让球</Text>
                                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', width: width - 32 }}>
                                    <View style={Styles.lefttable}>
                                        <Text style={Styles.td0}>0</Text>
                                        <Text style={Styles.td0}>{moreData.goaline}</Text>
                                    </View>
                                    <View>
                                        {moreData.a == 0 ? this._weikaishouM() : this._render_spf_item(moreData, 1)}
                                        {moreData.ha == 0 ? this._weikaishouM() : this._render_spf_item(moreData, 2)}
                                    </View>
                                </View>
                                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: width - 32, height: 30 }}>
                                    <Image resizeMode="cover" source={require('../../../image/js_img_icon_qtdg.png')} />
                                    <Text style={{ marginLeft: 5, color: '#333333' }}>比分</Text>
                                </View>
                                <View style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'flex-start', width: width - 32 }}>
                                    <View style={[Styles.lefttable, { height: 120, borderLeftColor: '#e5e5e5', borderLeftWidth: 0.5, borderBottomColor: '#e5e5e5', borderBottomWidth: 0.5 }]}>
                                        <Text style={{ fontSize: 12, color: '#d0162e' }}>主</Text>
                                        <Text style={{ fontSize: 12, color: '#d0162e' }}>胜</Text>
                                    </View>
                                    <View style={Styles.righttable}>
                                        {this._render_crs_item(moreData, 3, 1, crs[0])}
                                        {this._render_crs_item(moreData, 3, 2, crs[1])}
                                        {this._render_crs_item(moreData, 3, 3, crs[2])}
                                        {this._render_crs_item(moreData, 3, 4, crs[3])}
                                        {this._render_crs_item(moreData, 3, 5, crs[4])}
                                        {this._render_crs_item(moreData, 3, 6, crs[5])}
                                        {this._render_crs_item(moreData, 3, 7, crs[6])}
                                        {this._render_crs_item(moreData, 3, 8, crs[7])}
                                        {this._render_crs_item(moreData, 3, 9, crs[8])}
                                        {this._render_crs_item(moreData, 3, 10, crs[9])}
                                        {this._render_crs_item(moreData, 3, 11, crs[10])}
                                        {this._render_crs_item(moreData, 3, 12, crs[11])}
                                        {this._render_crs_item(moreData, 3, 13, crs[12])}
                                    </View>
                                    <View style={[Styles.lefttable, { height: 40, borderLeftColor: '#e5e5e5', borderLeftWidth: 0.5, borderBottomColor: '#e5e5e5', borderBottomWidth: 0.5 }]}>
                                        <Text style={{ fontSize: 12, color: '#32CD32' }}>平</Text>
                                    </View>
                                    <View style={Styles.righttable}>
                                        {this._render_crs_item(moreData, 3, 14, crs[13])}
                                        {this._render_crs_item(moreData, 3, 15, crs[14])}
                                        {this._render_crs_item(moreData, 3, 16, crs[15])}
                                        {this._render_crs_item(moreData, 3, 17, crs[16])}
                                        {this._render_crs_item(moreData, 3, 18, crs[17])}
                                    </View>
                                    <View style={[Styles.lefttable, { height: 120, borderLeftColor: '#e5e5e5', borderLeftWidth: 0.5, borderBottomColor: '#e5e5e5', borderBottomWidth: 0.5 }]}>
                                        <Text style={{ fontSize: 12, color: '#1E90FF' }}>主</Text>
                                        <Text style={{ fontSize: 12, color: '#1E90FF' }}>负</Text>
                                    </View>
                                    <View style={Styles.righttable}>
                                        {this._render_crs_item(moreData, 3, 19, crs[18])}
                                        {this._render_crs_item(moreData, 3, 20, crs[19])}
                                        {this._render_crs_item(moreData, 3, 21, crs[20])}
                                        {this._render_crs_item(moreData, 3, 22, crs[21])}
                                        {this._render_crs_item(moreData, 3, 23, crs[22])}
                                        {this._render_crs_item(moreData, 3, 24, crs[23])}
                                        {this._render_crs_item(moreData, 3, 25, crs[24])}
                                        {this._render_crs_item(moreData, 3, 26, crs[25])}
                                        {this._render_crs_item(moreData, 3, 27, crs[26])}
                                        {this._render_crs_item(moreData, 3, 28, crs[27])}
                                        {this._render_crs_item(moreData, 3, 29, crs[28])}
                                        {this._render_crs_item(moreData, 3, 30, crs[29])}
                                        {this._render_crs_item(moreData, 3, 31, crs[30])}
                                    </View>
                                </View>
                                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: width - 32, height: 30 }}>
                                    <Image resizeMode="cover" source={require('../../../image/js_img_icon_qtdg.png')} />
                                    <Text style={{ marginLeft: 5, color: '#333333' }}>进球数</Text>
                                </View>
                                <View style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'flex-start', width: width - 32 }}>
                                    <View style={[Styles.lefttable, { height: 80, borderLeftColor: '#e5e5e5', borderLeftWidth: 0.5, borderBottomColor: '#e5e5e5', borderBottomWidth: 0.5 }]}>
                                        <Text style={{ fontSize: 12, color: '#d0162e' }}>进</Text>
                                        <Text style={{ fontSize: 12, color: '#d0162e' }}>球</Text>
                                        <Text style={{ fontSize: 12, color: '#d0162e' }}>数</Text>
                                    </View>
                                    <View style={Styles.righttable}>
                                        {this._render_ttg_item(moreData, 4, 1, 8)}
                                    </View>
                                </View>
                                <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: width - 32, height: 30 }}>
                                    <Image resizeMode="cover" source={require('../../../image/js_img_icon_qtdg.png')} />
                                    <Text style={{ marginLeft: 5, color: '#333333' }}>半全场</Text>
                                </View>
                                <View style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'flex-start', width: width - 32 }}>
                                    <View style={[Styles.lefttable, { height: 120, borderLeftColor: '#e5e5e5', borderLeftWidth: 0.5, borderBottomColor: '#e5e5e5', borderBottomWidth: 0.5 }]}>
                                        <Text style={{ fontSize: 12, color: '#d0162e' }}>半</Text>
                                        <Text style={{ fontSize: 12, color: '#d0162e' }}>全</Text>
                                        <Text style={{ fontSize: 12, color: '#d0162e' }}>场</Text>
                                    </View>
                                    <View style={Styles.righttable}>
                                        {this._render_hafu_item(moreData, 5, 1, 9)}
                                    </View>
                                    <View style={{ width: width, height: 10 }}></View>
                                </View>
                            </View>
                        </ScrollView>
                        <View style={{ flexDirection: 'row', justifyContent: 'space-around', width: width - 16, borderTopColor: '#e5e5e5', borderTopWidth: 0.5 }} >
                            <TouchableOpacity style={Styles.ball_addr_operation} onPress={this.hide_more_model}>
                                <View style={[Styles.btn_item, { borderRightColor: '#ededed', borderRightWidth: 0.5, height: 40 }]}>
                                    <Text>取消</Text>
                                </View>
                            </TouchableOpacity >
                            <TouchableOpacity style={Styles.ball_addr_operation} onPress={this.submit_e_more_model}>
                                <View style={[Styles.btn_item]}>
                                    <Text style={{ color: '#d0162e' }}>确定</Text>
                                </View>
                            </TouchableOpacity >
                        </View>
                    </View>
                </View>
            </Modal>
        );
    }
    _do_show_more_model = (pid, key) => {
        this.setState({
            moreModalVisible: true,
            moreData: this.state.dataSource[pid].data[key],
            modelSelectItem: Utils.deepCopy(this.state.betNumber)
        });
    }
    hide_more_model = () => {
        this.setState({
            moreModalVisible: false,
            modelSelectItem: {}
        });
    }
    submit_e_more_model = () => {
        this.setState({
            moreModalVisible: false,
            betNumber: this.state.modelSelectItem,
            bet_count: this._getBetCount(this.state.modelSelectItem)
        }, () => {
            this.setState({
                modelSelectItem: {}
            });
        });
    }
    _do_change_isShow = (pid, key) => {
        let dataSource = this.state.dataSource.concat();
        let isShow = dataSource[pid].data[key].xi_show;
        if (isShow == 'off') {
            dataSource[pid].data[key].xi_show = 'on'
        } else {
            dataSource[pid].data[key].xi_show = 'off'
        }
        this.setState({
            dataSource: dataSource
        });
    }
    //选择投注场次
    _on_add_betNumber = (item, TypeId, BetNo, str, odds, dan) => {
        if(typeof(odds)=="undefined" || odds ==""){
            return;            
        }
        if (!Utils.compareDate(item.end_time)) {
            this.do_toast('投注时间已截止', 500);
            return;
        }
        let NoID = item.number + '_' + TypeId + '_' + BetNo;
        let bet = {
            NoID: NoID,
            Number: item.number,
            IsDan: 0,
            TypeId: TypeId,
            BetNo: BetNo,
            str: str,
            odds: odds,
            dan: dan,
            week: weekday[new Date(item.date_cn).getDay()],
            a_cn_abbr: item.a_cn_abbr,
            h_cn_abbr: item.h_cn_abbr,
            sort_num: item.sort_num
        }
        let betNumber = this.state.betNumber;
        if (betNumber.hasOwnProperty(NoID)) {
            delete betNumber[NoID];
        } else {
            betNumber[NoID] = bet;
        }
        this.setState({
            betNumber: betNumber,
            bet_count: this._getBetCount(betNumber)
        })
    }
    _on_mode_add_betNumber = (item, TypeId, BetNo, str, odds, dan) => {    
        if(typeof(odds)=="undefined" || odds ==""){
            return;            
        }
        if (!Utils.compareDate(item.end_time)) {
            this.do_toast('投注时间已截止', 500);
            return;
        }
        let NoID = item.number + '_' + TypeId + '_' + BetNo;
        let bet = {
            NoID: NoID,
            Number: item.number,
            IsDan: 0,
            TypeId: TypeId,
            BetNo: BetNo,
            str: str,
            odds: odds,
            dan: dan,
            week: weekday[new Date(item.date_cn).getDay()],
            a_cn_abbr: item.a_cn_abbr,
            h_cn_abbr: item.h_cn_abbr,
            sort_num: item.sort_num
        }
        let modelSelectItem = this.state.modelSelectItem;
        if (modelSelectItem.hasOwnProperty(NoID)) {
            delete modelSelectItem[NoID];
        } else {
            modelSelectItem[NoID] = bet;
        }
        this.setState({
            modelSelectItem: modelSelectItem,
        })
    }
    _on_bf_add_betNumber = (item, TypeId, BetNo, str, odds, dan) => {
        if (!Utils.compareDate(item.end_time)) {
            this.do_toast('投注时间已截止', 500);
            return;
        }
        let NoID = item.number + '_' + TypeId + '_' + BetNo;
        let bet = {
            NoID: NoID,
            Number: item.number,
            IsDan: 0,
            TypeId: TypeId,
            BetNo: BetNo,
            str: str,
            odds: odds,
            dan: dan,
            week: weekday[new Date(item.date_cn).getDay()],
            a_cn_abbr: item.a_cn_abbr,
            h_cn_abbr: item.h_cn_abbr,
            sort_num: item.sort_num
        }
        let BFSelectItem = this.state.BFSelectItem;
        if (BFSelectItem.hasOwnProperty(NoID)) {
            delete BFSelectItem[NoID];
        } else {
            BFSelectItem[NoID] = bet;
        }
        this.setState({
            BFSelectItem: BFSelectItem,
        })
    }
    //验证是否投注
    _checkBetNumber = (Number, TypeId, BetNo) => {
        let betNumber = this.state.betNumber;
        let NoID = Number + '_' + TypeId + '_' + BetNo;
        if (betNumber.hasOwnProperty(NoID)) {
            return true;
        }
        return false;
    }
    _checkModelBetNumber = (Number, TypeId, BetNo) => {
        let modelSelectItem = this.state.modelSelectItem;
        let NoID = Number + '_' + TypeId + '_' + BetNo;
        if (modelSelectItem.hasOwnProperty(NoID)) {
            return true;
        }
        return false;
    }
    _checkBFBetNumber = (Number, TypeId, BetNo) => {
        let BFSelectItem = this.state.BFSelectItem;
        let NoID = Number + '_' + TypeId + '_' + BetNo;
        if (BFSelectItem.hasOwnProperty(NoID)) {
            return true;
        }
        return false;
    }
    //胜平负未开售
    _weikaishou = () => {
        return (
            <View style={Styles.th}>
                 <Text style={{ color: '#868686',width:width - 154, fontSize: 12,height:35,textAlign:'center',lineHeight:35 }}>未开售</Text>
            </View>
        );
    }
    _weikaishouM=()=>{
        return (
            <View style={{ flexDirection:'row',justifyContent:'center',
            alignItems:'center',
            width:width - 55,
            borderTopColor: '#e5e5e5',
            borderTopWidth: 0.5,borderRightColor:'#e5e5e5',borderRightWidth:0.5}}>
                 <Text style={{ color: '#868686',fontSize: 12,height:40,textAlign:'center',lineHeight:40 }}>未开售</Text>
            </View>
        );
    }
    //胜平负未开售
    _weikaishouB = () => {
        return (
            <View style={Styles.weikaishouB}>
                <Text style={{ color: '#868686', fontSize: 12 }}>未开售</Text>
            </View>
        );
    }
    //验证是否选中
    _is_checked = (showtype, single, number, TypeId, BetNo) => {
        let css = [];
        if (showtype == 0) {
            single == 1 ? css.push(Styles.td_dan) : css.push(Styles.td);
            if (this._checkBetNumber(number, TypeId, BetNo)) {
                css.push(Styles.td_on);
            }
        }
        if (showtype == 1) {
            single == 1 ? css.push(Styles.td1_dan) : css.push(Styles.td1);
            if (this._checkModelBetNumber(number, TypeId, BetNo)) {
                css.push(Styles.td1_on);
            }
        }
        return css;
    }
    //验证是否选中
    _is_checked_model = (number, TypeId, BetNo) => {
        let css = [];
        if (this._checkBetNumber(number, TypeId, BetNo)) {
            if (showtype == 0) {
                css.push(Styles.td_on);
            }
            if (showtype == 1) {
                css.push(Styles.td1_on);
            }
        }
        return css;
    }
    _is_checked_more_statu = (number) => {
        let { betNumber } = this.state;
        for (let key in betNumber) {
            if (key.indexOf(number + '_3_') > -1 || key.indexOf(number + '_4_') > -1 || key.indexOf(number + '_5_') > -1) {
                return true;
                break;
            }
        }
        return false;
    }
    _get_item_dan = (item, TypeId) => {
        let dan = 0;
        switch (TypeId) {
            case 1:
                dan = item.had_single;
                break;
            case 2:
                dan = item.hhad_single;
                break;
            case 3:
                dan = item.crs_single;
                break;
            case 4:
                dan = item.ttg_single;
                break;
            case 5:
                dan = item.hafu_single;
                break;
        }
        return dan;
    }
    _td_item = (type, item, TypeId, BetNo, str, value, tips) => {
        let css = [{ width: (width - 100) / 3 }];
        switch (TypeId) {
            case 1:
                css = this._is_checked(type, item.had_single, item.number, TypeId, BetNo);
                break;
            case 2:
                css = this._is_checked(type, item.hhad_single, item.number, TypeId, BetNo);
                break;
        }
        css.push({ fontSize: 12 });
        let dan = this._get_item_dan(item, TypeId);
        return (
            <TouchableOpacity onPress={() => this._on_add_betNumber(item, TypeId, BetNo, tips, value, dan)}>
                <Text style={css}>{str}{value}</Text>
            </TouchableOpacity>
        );
    }

    //胜平负开售中
    _spfkaishouzhong = (item) => {
        let css = item.had_single == 1 ? Styles.th_dan : Styles.th;
        return (
            <View style={css}>
                {this._td_item(0, item, 1, 1, '胜', item.a, '主胜')}
                {this._td_item(0, item, 1, 2, '平', item.d, '主平')}
                {this._td_item(0, item, 1, 3, '负', item.h, '主负')}
                {item.had_single == 1 ? <Image resizeMode="cover" style={Styles.td_dan_icon} source={require('../../../image/js_img_icon_sfdg.png')} /> : null}
            </View>
        );
    }
    _render_crs_itemB = (item, TypeId, n, m) => {
        let crs_title = this.state.crs_title;
        let crs = item.crs.split(",");
        var itemArr = [];
        for (var i = n; i <= m; i++) {
            let BetNo = i;
            let str = crs_title[BetNo - 1];
            let tips = str;
            let value = crs[i - 1];
            let css = {};
            let text_css1 = {};
            let text_css2 = {};
            if (this._checkBFBetNumber(item.number, TypeId, BetNo)) {
                css = Styles.BFtd_on;
                text_css1 = { fontSize: 12, color: '#ffffff' };
                text_css2 = { fontSize: 12, color: '#ffffff' };
            } else {
                css = Styles.BFtd;
                text_css1 = { fontSize: 12, color: '#d0162e' };
                text_css2 = { fontSize: 12, color: '#358db5' };
            }
            let dan = this._get_item_dan(item, TypeId);
            let key = item.number + "" + TypeId + "" + BetNo;
            itemArr.push(
                <TouchableOpacity key={key} onPress={() => this._on_bf_add_betNumber(item, TypeId, BetNo, tips, value, dan)}>
                    <View style={css}>
                        <Text style={text_css1}>{str}</Text>
                        <Text style={text_css2}>{Number(value).toFixed(2)}</Text>
                    </View>
                </TouchableOpacity>
            );
        }
        return itemArr;
    }
    _render_ttg_itemB = (item, TypeId, n, m) => {
        let ttg = item.ttg.split(",");
        let ttg_title = this.state.ttg_title;
        let itemArr = [];
        for (let i = n; i <= m; i++) {
            let BetNo = i;
            let str = ttg_title[BetNo - 1];
            let value = ttg[BetNo - 1];
            let tips = str;
            let css = [{ width: (width - 108) / 4 }];
            let text_css1 = {};
            let text_css2 = {};
            if (this._checkBetNumber(item.number, TypeId, BetNo)) {
                css.push(Styles.td_onB);
                text_css1 = { color: '#ffffff' };
                text_css2 = { color: '#ffffff' };
            } else {
                css.push(Styles.tdB)
                text_css1 = { color: '#358db5' };
                text_css2 = { color: '#d0162e' };
            }
            let key = item.number + "" + TypeId + "" + BetNo;
            itemArr.push(
                <TouchableOpacity key={key} style={css} onPress={() => this._on_add_betNumber(item, TypeId, BetNo, tips, value)}>
                    <Text style={[text_css1, { fontSize: 12 }]}>{str}</Text>
                    <Text style={[text_css2, { fontSize: 12 }]}>{Number(value).toFixed(2)}</Text>
                </TouchableOpacity>
            );

        }
        return itemArr;
    }
    _render_hafu_itemB = (item, TypeId, n, m) => {
        let ttg = item.ttg.split(",");
        let hafu_title = this.state.hafu_title;
        let itemArr = [];
        for (let i = n; i <= m; i++) {
            let BetNo = i;
            let str = hafu_title[BetNo - 1];
            let value = ttg[BetNo - 1];
            let tips = str;
            let css = [{ width: (width - 104) / 3 }];
            let text_css1 = {};
            let text_css2 = {};
            if (this._checkBetNumber(item.number, TypeId, BetNo)) {
                css.push(Styles.td_onB);
                text_css1 = { color: '#ffffff' };
                text_css2 = { color: '#ffffff' };
            } else {
                css.push(Styles.tdB)
                text_css1 = { color: '#358db5' };
                text_css2 = { color: '#d0162e' };
            }
            let key = item.number + "" + TypeId + "" + BetNo;
            itemArr.push(
                <TouchableOpacity key={key} style={css} onPress={() => this._on_add_betNumber(item, TypeId, BetNo, tips, value)}>
                    <Text style={[text_css1, { fontSize: 12 }]}>{str}</Text>
                    <Text style={[text_css2, { fontSize: 12 }]}>{Number(value).toFixed(2)}</Text>
                </TouchableOpacity>
            );
        }
        return itemArr;
    }
    //胜平负开售中
    _spfkaishouzhongB = (item) => {
        if (item.a == 0) {
            return this._weikaishouB();
        }
        if (this.state.curr_single_type.id == 1 && item.had_single == 0) {
            return this._weikaishouB();
        }
        return (
            <View style={Styles.tableB}>
                {this._td_itemB(0, item, 1, 1, '胜', item.a, '主胜')}
                {this._td_itemB(0, item, 1, 2, '平', item.d, '主平')}
                {this._td_itemB(0, item, 1, 3, '负', item.h, '主负')}
            </View>
        );
    }
    _rspfkaishouzhongB = (item) => {
        if (item.ha == 0) {
            return this._weikaishouB();
        }
        if (this.state.curr_single_type.id == 1 && item.hhad_single == 0) {
            return this._weikaishouB();
        }
        return (
            <View style={Styles.tableB}>
                {this._td_itemB(0, item, 2, 1, '让胜', item.a, '让胜')}
                {this._td_itemB(0, item, 2, 2, '让平', item.d, '让平')}
                {this._td_itemB(0, item, 2, 3, '让负', item.h, '让负')}
            </View>
        );
    }
    _td_itemB = (type, item, TypeId, BetNo, str, value, tips) => {
        let css = [{ width: (width - 104) / 3 }];
        let text_css = {};
        if (this._checkBetNumber(item.number, TypeId, BetNo)) {
            css.push(Styles.td_onB);
            text_css = { color: '#ffffff', fontSize: 12 };
        } else {
            css.push(Styles.tdB);
            text_css = { color: '#868686', fontSize: 12 };
        }
        let dan = this._get_item_dan(item, TypeId);
        let goaline = "";
        if (TypeId == 2 && BetNo == 1) {
            goaline = "(" + (item.goaline > 0 ? "+" + item.goaline : item.goaline) + ")";
        }
        return (
            <TouchableOpacity style={css} onPress={() => this._on_add_betNumber(item, TypeId, BetNo, tips, value, dan)}>
                <Text style={text_css}>{str}{goaline}</Text>
                <Text style={text_css}>{Number(value).toFixed(2)}</Text>
            </TouchableOpacity>
        );
    }
    //让胜平负开售中
    _rspfkaishouzhong = (item) => {
        let css = item.hhad_single == 1 ? Styles.th_dan : Styles.th;
        return (
            <View style={css}>
                {this._td_item(0, item, 2, 1, '胜', item.ha, '让胜')}
                {this._td_item(0, item, 2, 2, '平', item.hd, '让平')}
                {this._td_item(0, item, 2, 3, '负', item.hh, '让负')}
                {item.hhad_single == 1 ? <Image resizeMode="cover" style={Styles.td_dan_icon} source={require('../../../image/js_img_icon_sfdg.png')} /> : null}
            </View>
        );
    }
    _render_more = (item) => {
        let css = Styles.more;
        let css_text = { color: '#969696', fontSize: 12 };
        if (this._is_checked_more_statu(item.number)) {
            css = Styles.more_on;
            css_text = { color: '#ffffff', fontSize: 12 };
        }
        return (
            <TouchableOpacity style={css} onPress={() => this._do_show_more_model(item.pid, item.key)}>
                <View >
                    <Text style={css_text}>更多</Text>
                    <Text style={css_text}>选项</Text>
                </View>
            </TouchableOpacity>
        );
    }
    //渲染每一个section中的每一个列表项
    renderSectionItem = ({ item }) => {
        let { curr_single_type } = this.state;
        switch (Football.SINGLE_TYPE[curr_single_type.data]) {
            case 1:
                return this.renderHHGG(item);
                break;
            case 2:
                return this.renderSPF(item);
                break;
            case 3:
                return this.renderBQC(item);
                break;
            case 4:
                return this.renderBF(item);
                break;
            case 5:
                return this.renderJQS(item);
                break;
        }
    }
    rnderGameAbbr = (item) => {
        return (
            <View style={{ marginLeft: 100, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginTop: 10, marginBottom: 10 }}>
                <Text style={{ fontSize: 14, color: '#323232', width: (width - 100) / 3, textAlign: 'center' }}>{item.h_cn_abbr}</Text>
                <Text style={{ fontSize: 14, color: '#358db5', width: (width - 100) / 3, textAlign: 'center' }}>VS</Text>
                <Text style={{ fontSize: 14, color: '#323232', width: (width - 100) / 3, textAlign: 'center' }}>{item.a_cn_abbr}</Text>
            </View>
        );
    }
    rendGameDes = (item) => {
        return (
            <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: 80 }}>
                <Text style={{ color: '#969696' }}>{item.sort_num.slice(-3)}</Text>
                <Text style={{ color: '#969696' }}>{item.l_cn_abbr}</Text>
                <Text style={{ color: '#969696' }}>{item.end_time.substr(11, 5)}(截)</Text>
                <TouchableOpacity onPress={() => this._do_change_isShow(item.pid, item.key)}>
                    <Text style={{ color: '#68a1eb' }}>析</Text>
                </TouchableOpacity>
            </View>
        );
    }
    _do_gameFollowFx=(date_cn,sort_num)=>{
        let time = date_cn.substring(0, 10).replace(/-/g, '') + sort_num;
        this.props.navigation.navigate('FollowFx',{
            time:time
        });    

    }
    rendGameFenXi = (item) => {
        if (item.xi_show == 'on') {
            return (
                <TouchableOpacity onPress={() => this._do_gameFollowFx(item.date_cn, item.sort_num)}>
                <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: 40, backgroundColor: '#eaeaea' }}>
                    <Text style={{ color: '#d0162e', fontSize: 12 }}>详细赛事分析 ></Text>
                </View>
                </TouchableOpacity>
            );
        } else {
            return (
                <View style={{ height: 1, backgroundColor: '#eaeaea' }}></View>
            );
        }
    }
    //混合投注
    renderHHGG = (item) => {
        return (
            <View style={[{ flexDirection: 'column' }]}>
                {this.rnderGameAbbr(item)}
                <View style={{ flexDirection: 'row', height: 70, marginBottom: 15 }}>
                    {this.rendGameDes(item)}
                    <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: 30 }}>
                        <Text style={Styles.quan1}>0</Text>
                        {item.goaline < 0 ? <Text style={Styles.quan2}>{item.goaline}</Text> : <Text style={Styles.quan3}>+{item.goaline}</Text>}
                    </View>
                    <View style={Styles.table}>
                        <View>
                            {item.a == 0 ? this._weikaishou() : this._spfkaishouzhong(item)}
                            {item.ha == 0 ? this._weikaishou() : this._rspfkaishouzhong(item)}
                        </View>
                        {this._render_more(item)}
                    </View>
                </View>
                {this.rendGameFenXi(item)}
            </View>
        );
    }
    //胜平负
    renderSPF = (item) => {
        return (
            <View style={[{ flexDirection: 'column' }]}>
                {this.rnderGameAbbr(item)}
                <View style={{ flexDirection: 'row', alignItems: 'center', height: 80, marginBottom: 15 }}>
                    {this.rendGameDes(item)}
                    <View>
                        {this._spfkaishouzhongB(item)}
                        {this._rspfkaishouzhongB(item)}
                    </View>
                </View>
                {this.rendGameFenXi(item)}
            </View>
        );
    }
    //半全场
    renderBQC = (item) => {
        return (
            <View style={[{ flexDirection: 'column' }]}>
                {this.rnderGameAbbr(item)}
                <View style={{ flexDirection: 'row', alignItems: 'center', height: 128, marginBottom: 15 }}>
                    {this.rendGameDes(item)}
                    <View style={Styles.tableB}>
                        {this._render_hafu_itemB(item, 5, 1, 9)}
                    </View>
                </View>
                {this.rendGameFenXi(item)}
            </View>
        );
    }
    showBFModel = (item) => {
        this.setState({
            betBFlVisible: true,
            BFItem: item,
            BFSelectItem: Utils.deepCopy(this.state.betNumber)
        })
    }
    _on_chage_BFtab = (str) => {
        this.setState({
            BFtab: str
        });
    }
    _on_submit_bfbet = () => {
        this.setState({
            betBFlVisible: false,
            betNumber: this.state.BFSelectItem,
            bet_count: this._getBetCount(this.state.BFSelectItem)
        }, () => {
            this.setState({
                BFSelectItem: {}
            });
        });
    }
    _rendBFModel = () => {
        let { single_type, curr_single_type, BFtab, BFItem } = this.state;
        if (BFItem == null) {
            return;
        }
        let item = BFItem;
        let tab1 = {};
        let tab2 = {};
        let tab3 = {};
        if (BFtab == '主胜') {
            tab2 = { height: 0, overflow: 'hidden' };
            tab3 = { height: 0, overflow: 'hidden' };
        }
        if (BFtab == '平') {
            tab1 = { height: 0, overflow: 'hidden' };
            tab3 = { height: 0, overflow: 'hidden' };
        }
        if (BFtab == '主负') {
            tab1 = { height: 0, overflow: 'hidden' };
            tab2 = { height: 0, overflow: 'hidden' };
        }
        return (
            <Modal
                animationType="fade"
                transparent={true}
                visible={this.state.betBFlVisible}
                onRequestClose={() => {
                    this.setState({
                        betBFlVisible: false
                    });
                }}
            >
                <View style={Styles.BFsibling}>
                    <View style={Styles.BFsiblingConten}>
                        <View style={Styles.BFsiblingHead}>
                            <Text style={{ width: width / 3, textAlign: 'center' }}>{item.a_cn_abbr}</Text>
                            <Text style={{ width: width / 3, textAlign: 'center' }}>VS</Text>
                            <Text style={{ width: width / 3, textAlign: 'center' }}>{item.h_cn_abbr}</Text>
                        </View>
                        <View style={Styles.BFsiblingTiele}>
                            <TouchableOpacity onPress={() => { this._on_chage_BFtab("主胜") }}>
                                <Text style={BFtab == '主胜' ? Styles.BFsiblingTieleText_on : Styles.BFsiblingTieleText}>主胜</Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => { this._on_chage_BFtab("平") }}>
                                <Text style={BFtab == '平' ? Styles.BFsiblingTieleText_on : Styles.BFsiblingTieleText}>平</Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => { this._on_chage_BFtab("主负") }}>
                                <Text style={BFtab == '主负' ? Styles.BFsiblingTieleText_on : Styles.BFsiblingTieleText}>主负</Text>
                            </TouchableOpacity>
                        </View>
                        <View style={{ width: width, height: 175, padding: 12, overflow: 'hidden' }}>
                            {this.renderBFCRS(item, 3, 1, 13, "主胜", [Styles.BFsiblingBet, tab1])}
                            {this.renderBFCRS(item, 3, 14, 18, "平", [Styles.BFsiblingBet, tab2])}
                            {this.renderBFCRS(item, 3, 19, 31, "主负", [Styles.BFsiblingBet, tab3])}
                        </View>
                        <TouchableOpacity onPress={() => { this._on_submit_bfbet() }}>
                            <Text style={{ width: width, height: 45, lineHeight: 45, textAlign: 'center', borderTopWidth: 1, borderTopColor: '#e3e3e3', color: '#d0162e' }}>确定</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </Modal>
        );
    }
    _on_all_selectBF = (item, TypeId, n, m) => {
        let crs_title = this.state.crs_title;
        let crs = item.crs.split(",");
        for (var i = n; i <= m; i++) {
            let BetNo = i;
            let str = crs_title[BetNo - 1];
            let tips = str;
            let value = crs[i - 1];
            let dan = this._get_item_dan(item, TypeId);
            if (!this._checkBFBetNumber(item.number, TypeId, BetNo)) {
                this._on_bf_add_betNumber(item, TypeId, BetNo, tips, value, dan)
            }
        }
    }
    _on_clear_selectBF = (item, TypeId, n, m) => {
        let BFSelectItem = this.state.BFSelectItem;
        for (var i = n; i <= m; i++) {
            let BetNo = i;
            let NoID = item.number + '_' + TypeId + '_' + BetNo;
            if (this._checkBFBetNumber(item.number, TypeId, BetNo)) {
                delete BFSelectItem[NoID];
            }
        }
        this.setState({
            BFSelectItem: BFSelectItem,
        })
    }
    renderBFCRS = (item, TypeId, n, m, name, css) => {
        return (
            <View style={css}>
                {this._render_crs_itemB(item, TypeId, n, m)}
                <TouchableOpacity onPress={() => { this._on_all_selectBF(item, TypeId, n, m) }}>
                    <View style={Styles.BFtd}>
                        <Text style={{ fontSize: 12, color: '#358db5' }}>全选</Text>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => { this._on_clear_selectBF(item, TypeId, n, m) }}>
                    <View style={Styles.BFtd}>
                        <Text style={{ fontSize: 12, color: '#358db5' }}>清除</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
    renderBF = (item) => {
        let betNumber = this.state.betNumber;
        let betContent = '';
        let str = item.number + '_3_';
        for (let key in betNumber) {
            if (key.indexOf(str) > -1) {
                betContent += betNumber[key].str + ' ';
            }
        }
        let info = '';
        if (betContent == '') {
            info = '点击选择投注选项';
        } else {
            info = betContent;
        }
        return (
            <View style={[{ flexDirection: 'column' }]}>
                {this.rnderGameAbbr(item)}
                <View style={{ flexDirection: 'row', alignItems: 'center', height: 80, marginBottom: 15 }}>
                    {this.rendGameDes(item)}
                    <View style={Styles.tableB}>
                        <TouchableOpacity onPress={() => { this.showBFModel(item) }}>
                            <Text style={{ width: width - 92, height: 40, lineHeight: 40, textAlign: 'center', color: '#d0162e', fontSize: 12, backgroundColor: '#e9e9e9' }}>{info}</Text>
                        </TouchableOpacity>
                    </View>
                </View>
                {this.rendGameFenXi(item)}
            </View>
        );
    }
    renderJQS = (item) => {
        return (
            <View style={[{ flexDirection: 'column' }]}>
                {this.rnderGameAbbr(item)}
                <View style={{ flexDirection: 'row', alignItems: 'center', height: 80, marginBottom: 15 }}>
                    {this.rendGameDes(item)}
                    <View style={Styles.tableB}>
                        {this._render_ttg_itemB(item, 4, 1, 8)}
                    </View>
                </View>
                {this.rendGameFenXi(item)}
            </View>
        );
    }
    //渲染每个section的头部
    renderSectionHeader = ({ section }) => {
        return (
            <TouchableOpacity
                style={{
                    backgroundColor: '#ffffff',
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    padding: 10,
                    borderBottomWidth: 0.5,
                    borderBottomColor: '#e6e6e6',
                }}
                onPress={() => { this.show(section) }}>
                <View>
                    <View style={{ flexDirection: 'row' }}>
                        <Text style={{ color: '#777777' }}>{section.date}</Text>
                        <Text style={{ color: '#777777', paddingLeft: 10, paddingRight: 10 }}>{section.week}</Text>
                        <Text style={{ color: '#777777' }}>{section.count}场比赛</Text>
                    </View>
                </View>
                <Image resizeMode="cover" source={require('../../../image/js_img_zhuihao_up.png')} />
            </TouchableOpacity>
        );
    }
    extraUniqueKey(item, index) {
        return index + item;
    }
    renderItemSeparator() {
        return (
            <View style={styles.divideLine} ></View>
        );
    }
    renderSectionSeparator() {
        return (
            <View style={{ height: 0.5, backgroundColor: '#e7e7e7' }} />
        );
    }
    // 根据isShow状态判断，展开改变数据源，增加数组数据，合上删除数组里的数据
    show = (data) => {
        let tempDataSource = this.state.dataSource.concat();
        if (data.isShow === 'off') {
            tempDataSource[data.key].data = Ugame.constDataSource[data.key].data.concat();
            tempDataSource[data.key].isShow = 'on';
        } else {
            tempDataSource[data.key].data = [];
            tempDataSource[data.key].isShow = 'off';
        }
        this.setState({
            dataSource: tempDataSource
        });
    }
    do_toast = (str, time) => {
        this.setState({
            message: str,
            toastModelVisible: true
        });
        this._time = setTimeout(() => {
            this.setState({
                message: '',
                toastModelVisible: false
            });
            clearTimeout(this._time);
        }, time);
    }
    toast = () => {
        return (
            <Modal
                animationType="fade"
                transparent={true}
                visible={this.state.toastModelVisible}
                onRequestClose={() => {
                    this.setState({
                        toastModelVisible: false
                    });
                }}
            >
                <View style={{ flexDirection: 'row', justifyContent: 'center', position: 'absolute', bottom: 100, width: width }}>
                    <Text style={{ backgroundColor: 'rgba(0,0,0,0.7)', color: '#ffffff', borderRadius: 10, height: 40, lineHeight: 40, paddingLeft: 20, paddingRight: 20 }}>{this.state.message}</Text>
                </View>
            </Modal>
        );
    }
    _clear_bet = () => {
        this.setState({
            betNumber: [],
            bet_count: 0,
        })
    }
    do_beting = () => {
        if (this.state.bet_count == 0) {
            this.do_toast('最少选择一场比赛', 1000);
            return;
        }
        if (this.state.bet_count > 8) {
            this.do_toast('最多选择8场比赛', 1000);
            return;
        }
        let { curr_single_type, betNumber } = this.state;
        let single_type = Football.SINGLE_TYPE[curr_single_type.data];
        switch (single_type) {
            case 1:
                let array = [];
                for (let key in betNumber) {
                    if (array.indexOf(betNumber[key].Number) == -1) {
                        array.push(betNumber[key].Number);
                    }
                }
                let is_dan = true;
                if (array.length == 1) {
                    for (let key in betNumber) {
                        if (betNumber[key].dan == 0) {
                            is_dan = false;
                            break;
                        }
                    }
                }
                if (is_dan == false) {
                    this.do_toast('非单关赛事,最少选择2场比赛', 1000);
                    return;
                }
                break;
            case 2:
                if (this.state.bet_count == 1) {
                    this.do_toast('最少选择两场比赛', 1000);
                    return;
                }
                break;
            case 3:
                if (this.state.bet_count == 1) {
                    this.do_toast('最少选择两场比赛', 1000);
                    return;
                }
                break;
            case 4:
                if (this.state.bet_count == 1) {
                    this.do_toast('最少选择两场比赛', 1000);
                    return;
                }
                break;
            case 5:
                if (this.state.bet_count == 1) {
                    this.do_toast('最少选择两场比赛', 1000);
                    return;
                }
                break;
        }
        if (!Ugame.isLogin()) {
            this.props.navigation.navigate('Login');
        } else {
            console.log(this.state.betNumber);
            this.props.navigation.navigate('FootballBetList', {
                title: curr_single_type.data + (curr_single_type.id == 0 ? "(过关)" : "(单关)"),
                betNumber: this.state.betNumber
            })
        }
    }    
    render() {
        let { ball_addr, select_boll_addr, dataSource, bet_count,betBFlVisible,moreModalVisible,barBackgroundColor,barBackgroundColorHide } = this.state;
        return (
            <View style={Styles.container}>
                <StatusBar translucent={true} backgroundColor={moreModalVisible || betBFlVisible?barBackgroundColorHide:barBackgroundColor} />
                {this._show_ball_addr_model()}
                <SectionList
                    renderItem={this.renderSectionItem}
                    renderSectionHeader={this.renderSectionHeader}// 渲染每个section的头部
                    scrollEnabled={true}//默认是true，false禁止滚动
                    sections={dataSource}
                    keyExtractor={this.extraUniqueKey}
                    ItemSeparatorComponent={this.renderItemSeparator.bind(this)}// item分隔线组件
                    SectionSeparatorComponent={this.renderSectionSeparator.bind(this)} // section分隔线组件
                    stickySectionHeadersEnabled={true}
                />
                <View style={{ backgroundColor: '#ffffff', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', height: 50, paddingLeft: 10, paddingRight: 10 }}>
                    <TouchableOpacity onPress={() => { this._clear_bet() }}>
                        <Image resizeMode="cover" style={Styles.icon_item} source={require('../../../image/js_img_tab_icon_clear.png')} />
                    </TouchableOpacity>
                    {bet_count == 0 ? <Text style={{ color: '#666666' }}>非单关至少选择两场比赛</Text> : <Text style={{ color: '#666666' }}>已选择{bet_count}场比赛</Text>}
                    <TouchableOpacity onPress={() => { this.do_beting() }}>
                        <Text style={{ backgroundColor: '#d0162e', borderRadius: 5, color: '#ffffff', paddingTop: 5, paddingBottom: 5, paddingLeft: 40, paddingRight: 40 }}>投注</Text>
                    </TouchableOpacity>
                </View>
                {this._show_more_model()}
                {this._rendBFModel()}
                {this.toast()}
            </View>
        )
    }
}

